<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src=" https://cdn.bootcdn.net/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <input type="checkbox" name="" id="ck1" checked>
    <input type="text" name="" id="ipt2" value="2323">

    <div id="box">
        <h2>aaa</h2>
        bbb
    </div>
    <script>

        /*
            dom 

                查询 
                    document.querySelector all -》$()
                属性 
                    标准属性
                        dom.属性名 
                        dom.属性名 = 属性值
                        dom.checked 
                        dom.checked =true


                        -》jq 
                            $('#ck1').prop('属性名')
                            $('#ck1').prop('属性名','属性值')
                    自定义属性
                        dom.setAttribute()
                        dom.getAttribute()
                        dom.rmoveAttribute()
                        dom.dataset.xx -> data-xx

                        ->jq
                            $().attr(key)
                            $().attr(key,value)


                内容
                    ipt.value
                    div.innerHTML
                    div.innerText
                    ->jq
                    $().val()
                    $().val('aa')
                    $().html()
                    $().html('aa')

                    $().text()
                    $().text('bb')



                样式
                    获取样式
                        getComputedStyle 最终样式
                    设置样式
                        dom.style.xx = 'xx'   行内样式

                     -》jq
                        $().css(key)   
                        $().css(key,value)   
                        $().css(obj)   

                class

                dom节点关系   ->       筛选器  父子 兄弟 

                dom 创建-添加-删除-替换
        
        */

        // 获取标准属性
        console.log($('#ck1').prop('checked'));

        // 设置标准属性
        $('#ck1').prop('checked', false)

        console.log($('#ipt2').prop('value'));
        $('#ipt2').prop('value', 'hello')
        $('#ipt2').prop('value', '')


        // 自定义属性
        console.log($('#ipt2').attr('value'))//标签里面写死的属性
        // console.log($('#ipt2').prop('value'));

        // 设置自定义属性
        $('#ipt2').attr('a', '1')
        // 获取自定义属性
        console.log($('#ipt2').attr('a'));

        // 删除
        $('#ipt2').removeAttr('a')



        // 内容操作--

        // 设置输入框的值
        $('#ipt2').val('你好')
        // 获取输入框的值
        console.log($('#ipt2').val());


        // 获取元素内部的 html代码
        console.log($('#box').html());
        // 设置元素内部的 html代码
        $('#box').html('hee')
        $('#box').html('<h1>iii</h1>')


        // 获取元素内部的 文本
        console.log($('#box').text());
        // 设置元素内部的 文本
        $('#box').text('<h1> iii</h1> ')




    </script>

</body>

</html>